<template>
  <div class="main-n">
    <el-card class="box-card">
      <div>
        <div class="notice-heading">公告</div> <!-- 设置公告标题样式 -->
        <div class="left-container"><br>{{ message }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios, { AxiosError } from 'axios'
export default {
    name: 'Notice',
    data(){
      return{
        message :'',
      }
    },
    methods : {
      //使用结构赋值进行异常处理
      promise_error_process(promise){
          return promise.then(data=>[null,data])
                          .catch(err=>[err,null])
      },
      async getNoticeByAjax(){
        const response = await axios({
        url				      : 'http://127.0.0.1:8080/api/column/letter',
        method			    : 'GET',
        withCredentials : true,
        params        :{
          letterId : this.$route.params.noticeId
        }
      })
        return response
      },
      async getNotice(){
        const [err,result] = await this.promise_error_process(this.getNoticeByAjax())
        if(err){
          console.log(err)
        }
        else{
          console.log(result)
          this.message = result.data.data.message
        }
      }
    },
    mounted(){
      this.getNotice()
    },
    watch: {
    '$route': {
      immediate: true,
      handler() {
        this.getNotice(); // 在路由参数变化时重新获取数据
      }
    }
  }
}
</script>

<style scoped>
.main-n{
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    position: absolute; /* 设置 test 为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .notice-heading {
  text-align: center; /* 文本居中 */
  font-weight: bold; /* 文本加粗 */
  font-size: 24px; /* 增大字体大小 */
}
.box-card{
  width: 75%;
  height: 60%;
}
.left-container{
  text-align: left;
}
</style>